<template>
  <div style="background: #F7F7F7">
    <div id="big">
      <div id="top">
        <a href="/"><img src="../../assets/img/lgxy_ioc.png"/></a>
      </div>
      <div id="register">
        <div id="register_title">申请成为讲师</div>
        <div id="register_steps">
          <el-steps :active="1" simple>
            <el-step title="签订协议" active="0" icon="el-icon-document"></el-step>
            <el-step title="填写资料" active="1" icon="el-icon-edit"></el-step>
            <el-step title="审核" active="2" icon="el-icon-time"></el-step>
          </el-steps>
        </div>
        <div id="stepinfo">

          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" @submit.native.prevent>

            <el-form-item label="电话号码" prop="mobile" style="width: 400px">
              <el-input v-model="ruleForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code" style="width: 400px">
              <el-input v-model="ruleForm.code" style="font-weight: bold;font-size: 25px"></el-input>
            </el-form-item>

            <div class="get-code" @click="refreshCode()">
              <div>点击获取验证码</div>
              <verificationCode :identifyCode="identifyCode"></verificationCode>
            </div>
            <el-form-item>
            <div id="subBtn">
              <button @click="submitForm('ruleForm')">提交</button>
            </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
    import step from '@/components/teacher_recruit/step'
    import verificationCode from '@/components/teacher_recruit/verificationCode'
    import Bottom from '@/components/Bottom'
    export default {
        name: "ApplyTwo",
      components: {step,verificationCode,Bottom},
      data(){
        return{
          rules:{
            mobile: [
              { required: true, message: '请输入手机号码', trigger: 'blur' },
              {
                validator: function (rule, value, callback) {
                  var MobileRegex = /^1[0-9]{10}$/;
                  if (!MobileRegex.test(value)) {
                    callback(new Error('手机号码格式不正确！'))
                  } else {
                    callback();
                  }
                }, trigger: 'blur'
              }
            ],
            code:[{
              required: true, message: '请输入验证码', trigger: 'blur'
            }]
          },
          identifyCode: "",
          identifyCodes: "0123456789abcdefghigklmnopqrstuvwxyz",
          ruleForm: {
            mobile:'',
            code:'',
          },
        }
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              if (this.identifyCode==this.ruleForm.code){
                //window.location.href="/#/ApplyThree";
                this.$router.push({
                  path:'/ApplyThree',
                  query:{
                    phone:this.ruleForm.mobile
                  }
                });
              }else {
                this.$message({
                  message: '验证码错误',
                  type: 'warning'
                });
              }
            } else {
              this.$message.error('失败，请重试！！！');
              return false;
            }
          });
        },
        refreshCode() {//
          this.identifyCode = "";
          this.makeCode(this.identifyCodes,4);
        },
        randomNum (min, max) {
          max = max + 1;
          return Math.floor(Math.random() * (max - min) + min)
        },
        // 随机生成验证码字符串
        makeCode (data, len) {
          for (let i = 0; i < len; i++) {
            this.identifyCode += data[this.randomNum(0, data.length - 1)]
          }
        },
      },
    }
</script>

<style scoped>
  #big{
    width: 900px;
    margin: auto;
  }
  #top{
    height: 112px;
  }
  #top img{
    width: 186px;
    height: 52px;
    margin-top: 30px;
  }
  #register{
    border-radius: 8px;
    background: white;
  }
  #register_title{
    width: 900px;
    height: 80px;
    background: #E4E4E4;
    border-radius: 8px 8px 0 0;
    text-align: center;
    line-height: 80px;
    font-size: 18px;
  }
  #register_steps{
    width: 900px;
  }
  #subBtn{
    text-align: center;
    padding: 30px;
  }
  #subBtn button{
    width: 320px;
    height: 46px;
    background: #D51423;
    border: 0;
    border-radius: 8px;
    color: white;
  }
  .get-code{
    border: 1px solid aqua;
    padding: 10px;
    width: 200px;
    text-align: center;
    position: absolute;
    top:296px;
    right: 650px;
  }
  #stepinfo{
    padding: 40px;
    margin-bottom: 100px;
  }
</style>
